<template>
  <div>
    <v-row :gutter="16" :style="{ margin: '12px 5px' }">
      <!-- 导航 -->
      <v-col class="gutter-row" span="8">
        <v-breadcrumb>
          <v-breadcrumb-item>
            <v-icon type="home"></v-icon>
            <router-link :to="{ name: 'Index' }" @click.native="reload">首页</router-link>
          </v-breadcrumb-item>
            书籍列表
          <v-breadcrumb-item>
          </v-breadcrumb-item>
        </v-breadcrumb>
      </v-col>
      <!-- 分类 -->
      <v-col class="gutter-row" span="12" offset="4">
        <v-tag v-for="(color, $index) in typeColors" :key="$index" :color="color.value">
          <span @click="changeType(color.label)">{{ chooseType(color.label) }}</span>
        </v-tag>
      </v-col>
    </v-row>
    <!-- 查询 -->
    <v-row :gutter="16" style="margin-top: 20px;">
      <v-col class="gutter-row" span="8" offset="8">
        <v-input v-model="word" placeholder="小说不好看? ">
          <span slot="after" @click="query">查询</span>
        </v-input>
      </v-col>
    </v-row>
    <!-- 数据 -->
    <div v-for="(book, $index) in books" :key="$index" style="margin: 20px 250px;">
      <v-card class="book" :title="book.name" :bordered="true">
        <div slot="extra">
          <v-row :gutter="16">
            <v-col class="gutter-row" span="10">
              <router-link :to="{ name: 'BookChapters', params: { bookId: book.id } }">{{ book.name }}</router-link>&nbsp;&nbsp;
              <v-tag :color="statusPick(book.status)">{{ book.status }}</v-tag>
              <v-tooltip content="浏览量" placement="top">
                <v-tag color="#00a854">{{ book.view | viewFilter }}</v-tag>
              </v-tooltip>
            </v-col>
            <v-col class="gutter-row" span="2" offset="12">
              <v-tag :color="colorPick(book.type)">{{ book.type }}</v-tag>
            </v-col>
          </v-row>
        </div>
        <div>
          <v-row :gutter="16">
            <v-col class="gutter-row" span="4">
              <img width="100%" height="100%" :src="book.image">
            </v-col>
            <v-col class="gutter-row" span="20">{{ book.description }}</v-col>
          </v-row>
          <v-row :gutter="16">
            <v-col class="gutter-row" span="6">
              <router-link v-if="book.newChapterId" :to="{ name: 'BookContent', params: { bookId: book.id, chapterId: book.newChapterId } }"
                style="color: rgb(255, 85, 0)">
                最新章节: {{ book.newChapterName }}
              </router-link>
              <a v-else :href="book.url" style="color: #7265e6; text-decoration: none;" target="_blank">本站暂未收录该书籍</a>
            </v-col>
            <v-col v-if="!book.newChapterId" class="gutter-row" span="4" offset="4">
              <span @click="apply(book.id)">申请收录？</span>
            </v-col>
            <v-col v-else class="gutter-row" span="4" offset="4"></v-col>
            <v-col class="gutter-row" span="4" offset="6">{{ book.author }} ( {{ book.updateAt | fmt }} )</v-col>
          </v-row>
        </div>
      </v-card>
    </div>
    <!-- 滚动加载 -->
    <infinite-loading :identifier="infiniteId" @infinite="loadMore" style="margin-top: 20px;">
      <div slot="spinner">拼命加载中...</div>
      <div slot="no-more">没有更多内容啦:(</div>
      <div slot="no-results">没数据啦:(</div>
    </infinite-loading>
    <!-- 回到顶部 -->
    <v-back-top></v-back-top>
  </div>
</template>

<script>
import moment from "moment";

const colors = {
  玄幻魔法: "green",
  武侠修真: "cyan",
  现代都市: "yellow",
  言情小说: "pink",
  历史军事: "blue",
  游戏竞技: "purple",
  科幻灵异: "#108ee9",
  耽美小说: "red",
  同人小说: "orange",
  其他类型: "#87d068"
};

const statusArr = {
  连载中: "#f50",
  已完成: "#000"
};

export default {
  name: "Index",
  data() {
    return {
      word: this.$route.query.word,
      type: this.$route.query.type,
      infiniteId: +new Date(),
      page: 0,
      books: [],
      typeColors: [
        { value: "green", label: "玄幻魔法" },
        { value: "cyan", label: "武侠修真" },
        { value: "yellow", label: "现代都市" },
        { value: "pink", label: "言情小说" },
        { value: "blue", label: "历史军事" },
        { value: "purple", label: "游戏竞技" },
        { value: "#108ee9", label: "科幻灵异" },
        { value: "red", label: "耽美小说" },
        { value: "orange", label: "同人小说" },
        { value: "#87d068", label: "其他类型" }
      ]
    };
  },
  filters: {
    fmt(timestamp) {
      return moment(timestamp).fromNow();
    },
    viewFilter(view) {
      if (view) {
        return view;
      }
      return 0;
    }
  },
  methods: {
    query() {
      if (this.word) {
        this.$router.push({ name: "List", query: { word: this.word } });
        this.$router.go(0);
      }
    },
    loadMore($state) {
      const params = {
        word: this.word,
        type: this.type,
        page: this.page,
        size: 10,
        sort: "view,desc"
      };
      this.$get("/book/search", params, true).then(data => {
        if (data.content.length) {
          this.page += 1;
          this.books.push(...data.content);
          $state.loaded();
        } else {
          $state.complete();
        }
      });
    },
    colorPick(type) {
      let color = colors[type];
      if (color) {
        return color;
      }
      return "#87d068";
    },
    statusPick(status) {
      let color = statusArr[status];
      if (color) {
        return color;
      }
      return "gray";
    },
    changeType(type) {
      this.$router.push({ name: "List", query: { type: type } });
      this.$router.go(0);
    },
    chooseType(type) {
      if (type == this.type) {
        return "已选择: " + type;
      } else {
        return type;
      }
    },
    reload() {
      this.$router.go(0);
    },
    apply(name) {
      this.$notification.warning({
        message: "警告",
        description: "暂未开放此功能！" + name
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.book .ant-card-extra {
  width: 100%;
}

.book .ant-card-head-title {
  display: none;
}

.book .ant-card-extra {
  float: left;
}
</style>
